<template>
	<div class="role-authorization">
		<div class="role-box">
			<!-- 左边导航 -->
			<div 
				v-loading="roleMenuLoading" 
				class="nav_crm1">
				<div class="nav-new-btn">
					<el-button 
						size="small" 
						@click="newRoleBtn"> 新建角色 </el-button>
				</div>
				<!-- 角色列表 -->
				<div class="role-nav-box">
					<div 
						v-for="(item, index) in roleList" 
						:key="index"
						:class="{'item-list-hover' : item.id == roleActive.id}" 
						class="item-list"
						@click="roleMenuSelect(item)">
						{{ item.title }}
						<div class="icon-close">
							<el-dropdown 
								trigger="click" 
								@command="roleHandleClick">
								<i 
									class="el-icon-arrow-down" 
									@click="roleDropdownClick(item)" />
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="edit">编辑</el-dropdown-item>
									<el-dropdown-item command="delete">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
				</div>
			</div>

			<!-- 角色编辑 -->
			<el-dialog 
				:title="roleTitle" 
				:visible.sync="newRoleVisible" 
				:before-close="newRoleClose" 
				width="30%">
				<label 
					class="label-title">角色名称</label>
				<el-input 
					v-model="role.title" 
					class="input-role" />
				<span 
					slot="footer" 
					class="dialog-footer">
					<el-button 
						type="primary" 
						size="mini" 
						@click="newRoleSubmit">确 定</el-button>
					<el-button 
						size="mini" 
						@click="newRoleClose">取 消</el-button>
				</span>
			</el-dialog>

			<!-- 右边内容 -->
			<div class="content-box">
				<el-tabs v-model="mainMenuIndex">
					<el-tab-pane 
						label="角色员工" 
						name="user">
						<div 
							v-loading="userLoading" 
							class="content-table">
							<flexbox class="content-table-header">
								<div class="content-table-header-reminder">
								</div>
								<el-button 
									size="small" 
									type="primary" 
									@click="addEmployees"> 关联员工 </el-button>
							</flexbox>
							<el-table 
								:data="tableData" 
								:height="tableHeight" 
								style="width: 100%">
								<el-table-column 
									v-for="(item, index) in tableList" 
									:prop="item.field"
									:label="item.label" 
									:key="index" 
									show-overflow-tooltip 
									align="center">
									<template 
										slot="header" 
										slot-scope="scope">
										<div class="table-head-name">{{ scope.column.label }}</div>
									</template>
								</el-table-column>
								<el-table-column 
									align="center" 
									label="操作">
									<template slot-scope="scope">
										<span class="el-icon-delete content-table-span"
											@click="delectEmployees(scope.row)" />
									</template>
								</el-table-column>
							</el-table>
							<div class="p-contianer">
								<el-pagination 
									:current-page="currentPage" 
									:page-sizes="pageSizes"
									:page-size.sync="pageSize" 
									:total="total" 
									class="p-bar"
									layout="total, sizes, prev, pager, next, jumper" 
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange" />
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane 
						v-if="roleActive && showRuleSet" 
						label="角色权限" 
						name="rule">
						<!-- 权限管理 -->
						<div 
							v-loading="ruleLoading" 
							class="jurisdiction-box">
							<el-button 
								v-if="roleActive" 
								size="mini" 
								type="primary" 
								class="jurisdiction-edit"
								@click="ruleSubmit"> 保存 </el-button>
							<el-tabs v-model="ruleMenuIndex">
								<el-tab-pane 
									v-for="(item, index) in ruleMenuList" 
									:key="index" 
									:label="item.label"
									:name="item.index">
									<div 
										v-if="item.type == 'tree'" 
										:style="{ height: treeHeight + 'px'}"
										class="jurisdiction-content">
										<div class="jurisdiction-content-checkbox">
											<el-tree 
												:data="item.data" 
												:ref="'tree' + item.index" 
												:indent="0"
												:expand-on-click-node="false" 
												:props="defaultProps" 
												show-checkbox
												node-key="id" 
												style="height: 0;" 
												empty-text="" 
												default-expand-all />
										</div>
									</div>
									<div v-else class="jurisdiction-content">
										<div class="data-radio">
											<el-radio-group v-model="item.value">
												<el-radio :label="1">本人</el-radio>
												<el-radio :label="2">本人及下属</el-radio>
												<el-radio :label="3">本部门</el-radio>
												<el-radio :label="4">本部门及下属部门</el-radio>
												<el-radio :label="5">全部</el-radio>
											</el-radio-group>
										</div>
									</div>
								</el-tab-pane>
							</el-tabs>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<!-- 关联员工 -->
		<relate-empoyee 
			:visible.sync="relateEmpoyeeShow" 
			:role-id="roleId" 
			@save="employeesSave" />
	</div>
</template>

<script>
	import {
		getRoleauthList,
		getRoleuserList,
		roleAdd,
		roleUpdate,
		roleRulesUpdate,
		roleDel,
		rulesList,
		roleUsersDel,
		roleUsers
	} from '@/api/setting/setting'
	import RelateEmpoyee from './components/relateEmpoyee'
	export default {
		components: {
			RelateEmpoyee
		},
		data() {
			return {
				pid: '',
				// 加载
				roleMenuLoading: false,

				// 新建角色
				newRoleVisible: false,
				role: {}, // 操作角色的框 关联的信息
				roleList: [], // 角色列表 list属性 是信息
				roleTitle: '', // 新建编辑角色title

				// 选中的角色
				roleActive: null,

				mainMenuIndex: 'user', // 角色员工  角色权限 切换 默认左边

				// 员工列表加载中
				userLoading: false,

				relateEmpoyeeShow: false,

				// 与角色关联的员工
				tableData: [],
				// 表的高度
				tableHeight: document.documentElement.clientHeight - 240,
				treeHeight: document.documentElement.clientHeight - 230,
				tableList: [{
						label: '姓名',
						field: 'username'
					},
					{
						label: '部门',
						field: 'department'
					},
					{
						label: '角色',
						field: 'roles'
					}
				],
				// 页面参数
				currentPage: 1,
				pageSize: 15,
				pageSizes: [15, 30, 45, 60],
				total: 0,

				// 权限加载中
				ruleLoading: false,

				// 权限管理
				ruleMenuIndex: 'data', // 默认模块 工作台
				ruleMenuList: [],
				defaultProps: {
					children: 'children',
					label: 'title'
				},
			}
		},
		computed: {
			// 展示角色权限
			showRuleSet() {
				if (this.roleActive) {
					return this.roleActive.pid != 0
				}
				return false
			},

			roleId() {
				if (this.roleActive) {
					return this.roleActive.id
				}
				return ''
			},
		},
		mounted() {
			/** 控制table的高度 */
			window.onresize = () => {
				this.tableHeight = document.documentElement.clientHeight - 240
				this.treeHeight = document.documentElement.clientHeight - 230
			}
			/** 获取权限信息 */
			this.getRulesList()
			this.getRoleList()
		},

		beforeRouteUpdate(to, from, next) {
			this.roleActive = null
			this.roleList = []
			this.currentPage = 1
			this.total = 0
			this.tableData = []
			this.getRulesList()
			this.getRoleList()
			next()
		},

		methods: {
			/**
			 * 获取权限规则信息
			 */
			getRulesList() {
				rulesList({
					type: 'tree'
				}).then(res => {
					if (res.data.length == 2) {
						this.ruleMenuList = [{
								label: '模块功能',
								index: 'data',
								type: 'tree',
								value: [],
								data: [res.data[0]]
							},
							{
								label: '数据分析',
								index: 'bi',
								type: 'tree',
								value: [],
								data: [res.data[1]]
							}
						]
					} else if (res.data.length == 1) {
						this.ruleMenuList = [{
							label: '模块功能',
							index: 'data',
							type: 'tree',
							value: [],
							data: [res.data[0]]
						}]
					} else {
						this.ruleMenuList = []
					}

					this.getRoleRulesInfo()
				})
			},

			/**
			 * 获取角色列表
			 */
			getRoleList() {
				this.roleMenuLoading = true
				getRoleauthList().then(res => {
						this.roleList = res.data
						/** 判断数据是否存在 */
						let hasActive = false
						if (this.roleActive) {
							for (let index = 0; index < this.roleList.length; index++) {
								const item = this.roleList[index]
								if (item.id == this.roleActive.id) {
									this.roleActive = item
									this.getRoleRulesInfo()
									hasActive = true
									break
								}
							}
						}
						if (!hasActive && this.roleList.length) {
							this.roleActive = this.roleList[0]
							// this.getRoleRulesInfo()
						}
						this.getUserList(this.roleActive)
						this.roleMenuLoading = false
					})
					.catch(() => {
						this.roleMenuLoading = false
					})
			},

			/**
			 * 新建角色
			 */
			newRoleClose() {
				this.newRoleVisible = false
			},
			newRoleBtn() {
				this.roleTitle = '新建角色'
				this.newRoleVisible = true
				this.role = {}
			},

			/**
			 * 角色列表点击
			 */
			roleMenuSelect(val) {
				this.roleActive = val

				if (this.mainMenuIndex == 'rule' && !this.showRuleSet) {
					this.mainMenuIndex = 'user'
				}

				this.getRoleRulesInfo()

				this.getUserList(this.roleActive)
			},

			/**
			 * 角色操作
			 */
			roleDropdownClick(value) {
				this.dropdownHandleRole = value
			},
			roleHandleClick(command) {
				if (command == 'edit') {
					this.roleEditBtn(this.dropdownHandleRole)
				} else if (command == 'delete') {
					this.roleDelect(this.dropdownHandleRole)
				}
			},

			/**
			 * 角色编辑
			 */
			roleEditBtn(val) {
				this.roleTitle = '编辑角色'
				this.role = {
					title: val.title,
					id: val.id
				}
				this.newRoleVisible = true
			},

			/**
			 * 删除
			 */
			roleDelect(val) {
				this.$confirm('此操作将永久删除是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						roleDel({
							id: [val.id]
						}).then(res => {
							if (this.roleList.length) {
								this.roleActive = this.roleList[0]
							}
							this.getRoleList()
							this.$message.success('删除成功')
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},

			/**
			 * 关联员工确定
			 */
			employeesSave(val) {
				// return console.log(val);
				roleUsers({
						user_ids: val.users.map(function(data) {
							return data.id
						}),
						id: this.roleId
					})
					.then(res => {
						this.$message.success(res.data)
						// this.$emit('save')
						this.relateEmpoyeeShow = false
						this.getUserList(this.roleActive)
					})
					.catch(() => {})
				
			},

			newRoleSubmit() {
				if (!this.role.title) {
					this.$message.error('角色名称不能为空')
				} else {
					if (this.roleTitle == '新建角色') {
						roleAdd({
							title: this.role.title
						}).then(res => {
							this.getRoleList()
							this.$message.success('添加成功')
							this.newRoleClose()
						})
					} else {
						roleUpdate(this.role).then(res => {
							this.getRoleList()
							this.$message.success('编辑成功')
							this.newRoleClose()
						})
					}
				}
			},

			/**
			 * 关联员工
			 */
			addEmployees() {
				this.relateEmpoyeeShow = true
			},

			/**
			 * 删除
			 */
			delectEmployees(val) {
				this.$confirm('此操作将永久删除是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.userLoading = true
						roleUsersDel({
							user_ids: val.id,
							roleids: this.roleActive.id
						}).then(
							res => {
								this.userLoading = true
								this.getUserList(this.roleActive)
								this.$message.success('删除成功')
							}
						).catch(() => {
							this.userLoading = false
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},

			/**
			 * 员工列表
			 */
			getUserList(role, noReset) {
				if (!role) {
					return
				}

				if (!noReset) {
					this.currentPage = 1
				}
				this.userLoading = true
				getRoleuserList({
					page: this.currentPage,
					limit: this.pageSize,
					id: role.id
				}).then(res => {
					this.tableData = res.data.list
					this.total = res.data.count
					this.userLoading = false
				}).catch(() => {
					this.userLoading = false
				})
			},

			/**
			 * 更改每页展示数量
			 */
			handleSizeChange(val) {
				this.pageSize = val
				this.getUserList(this.roleActive, true)
			},
			/**
			 * 更改当前页数
			 */
			handleCurrentChange(val) {
				this.currentPage = val
				this.getUserList(this.roleActive, true)
			},

			/**
			 * 获取权限信息 需在roleActive获取之后
			 */
			getRoleRulesInfo() {
				if (this.roleActive && this.ruleMenuList.length) {
					if (this.roleActive.type) {
						const lastItem = this.ruleMenuList[this.ruleMenuList.length - 1]
						if (lastItem.type != 'data') {
							this.ruleMenuList.push({
								label: '数据权限',
								index: 'info',
								type: 'data',
								value: this.roleActive.type
							})
						}
					}

					for (let index = 0; index < this.ruleMenuList.length; index++) {
						const element = this.ruleMenuList[index]
						if (element.type == 'tree') {
							element.rules = this.getRoleRules(
								this.roleActive.rules[element.index],
								element.data[0]
							)
							// console.log(this.ruleMenuList[index]);
							this.$nextTick(() => {
								const treeRefs = this.$refs['tree' + element.index]
								if (treeRefs) {
									if (
										Object.prototype.toString.call(treeRefs) == '[object Array]'
									) {
										treeRefs.length && treeRefs[0].setCheckedKeys(element.rules)
									} else {
										treeRefs.setCheckedKeys(element.rules)
									}
								}
							})
						} else {
							element.value = this.roleActive.type
						}
					}
				}
			},

			/**
			 * 获得check的实际数据
			 */
			getRoleRules(array, tree) {
				// this.roleActive.rules['data'],
				if (!array) {
					array = []
				}

				var hasRemove = false
				var copyArray = this.copyItem(array)
				for (
					let firstIndex = 0; firstIndex < tree.children.length; firstIndex++
				) {
					const firstItem = tree.children[firstIndex]

					if (!firstItem.hasOwnProperty('children')) {
						if (firstItem.length + 1 != copyArray.length) {
							this.removeItem(copyArray, tree.id)
						}
						return copyArray
					}

					for (let index = 0; index < array.length; index++) {
						const element = array[index]
						var temps = []
						for (
							let secondIndex = 0; secondIndex < firstItem.children.length; secondIndex++
						) {
							const secondItem = firstItem.children[secondIndex]
							if (secondItem.id == element) {
								temps.push(secondItem)
							}
						}
						if (temps.length != firstItem.children.length) {
							hasRemove = true
							this.removeItem(copyArray, firstItem.id)
						}
					}
				}

				if (hasRemove) {
					this.removeItem(copyArray, tree.id)
				}

				var checkedKey = []
				for (let index = 0; index < copyArray.length; index++) {
					const element = copyArray[index]
					if (element) {
						checkedKey.push(parseInt(element))
					}
				}
				// console.log(checkedKey);
				return checkedKey
			},
			copyItem(array) {
				var temps = []
				for (let index = 0; index < array.length; index++) {
					temps.push(array[index])
				}
				return temps
			},
			removeItem(array, item) {
				var removeIndex = -1
				for (let index = 0; index < array.length; index++) {
					if (item == array[index]) {
						removeIndex = index
						break
					}
				}
				if (removeIndex > 0) {
					array.splice(removeIndex, 1)
				}
			},

			// 权限提交
			ruleSubmit() {
				this.ruleLoading = true

				let rules = []
				let infoData = ''
				for (let index = 0; index < this.ruleMenuList.length; index++) {
					const element = this.ruleMenuList[index]
					if (element.type == 'tree') {
						const treeRefs = this.$refs['tree' + element.index]
						if (treeRefs) {
							if (Object.prototype.toString.call(treeRefs) == '[object Array]') {
								rules = rules.concat(
									treeRefs[0]
									.getCheckedKeys()
									.concat(treeRefs[0].getHalfCheckedKeys())
								)
							} else {
								rules = rules.concat(
									treeRefs.getCheckedKeys().concat(treeRefs.getHalfCheckedKeys())
								)
							}
						}
					} else {
						infoData = element.value
					}
				}
				// return console.log(infoData);
				roleRulesUpdate({
						rules: rules,
						type: infoData,
						id: this.roleActive.id
					}).then(res => {
						this.getRoleList()
						this.$message.success(res.data)
						this.ruleLoading = false
					})
					.catch(() => {
						this.ruleLoading = false
					})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.role-authorization {
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.role-box {
		height: calc(100%);
		overflow: hidden;
		position: relative;
	}

	.nav_crm1 {
		width: 200px;
		background: #fff;
		border: 1px solid #e6e6e6;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.nav-new-btn {
		text-align: center;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.nav-new-btn .el-button {
		background: #3e84e9;
		border-color: #3e84e9;
		color: #fff;
		width: 140px;
		border-radius: 2px;
	}

	.content-box {
		background: #fff;
		border: 1px solid #e6e6e6;
		margin-left: 215px;
		height: 100%;
		overflow: hidden;
		padding-top: 10px;
		position: relative;
	}

	.content-table {
		overflow: hidden;
	}

	.content-table>.el-button {
		float: right;
		margin-bottom: 15px;
		margin-right: 30px;
	}

	.content-box .content-table-span {
		color: #3e84e9;
		margin-left: 5px;
		cursor: pointer;
	}

	.content-table-header {
		padding: 0 15px 5px;

		.content-table-header-reminder {
			flex: 1;
			margin-right: 5px;
		}
	}

	/* 权限管理 */
	.jurisdiction-content {
		height: calc(100% - 61px);
		position: relative;
		overflow: hidden;
	}

	.content-left {
		height: 100%;
		margin-right: 250px;
		overflow: hidden;
	}

	.content-right {
		width: 250px;
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
	}

	.jurisdiction-box {
		padding-bottom: 15px;
		height: calc(100% - 61px);
		overflow: hidden;
		position: relative;
	}

	.jurisdiction-content-checkbox {
		border-right: 1px dashed #e6e6e6;
		height: calc(100% - 47px);
		overflow-y: scroll;
		padding: 20px;
	}

	.jurisdiction-content-checkbox .el-tree /deep/ .el-tree-node>.el-tree-node__content {
		margin-bottom: 20px;
		width: 150px;
	}

	.jurisdiction-content-checkbox /deep/ .el-tree .el-tree-node {
		white-space: inherit;
		margin-bottom: 5px;
	}

	.jurisdiction-content-checkbox /deep/ .el-tree>.el-tree-node>.el-tree-node__children>.is-expanded>.el-tree-node__children>.is-expanded {
		display: inline-block;
	}

	.role-authorization /deep/ .el-tree-node__expand-icon {
		display: none;
	}

	.data-radio {
		padding: 5px 30px;
	}

	.data-radio .el-radio {
		display: block;
		margin: 20px 0;
	}

	/* 新建角色 */
	.input-role {
		padding: 10px 0 20px;
		width: 100%;
	}

	.role-nav-box {
		line-height: 30px;
		overflow-y: auto;
		padding: 5px 0 20px 0;
		height: calc(100% - 65px);
	}

	.role-nav-box .item-list {
		color: #333;
		font-size: 13px;
		padding-left: 30px;
		height: 40px;
		line-height: 40px;
		border-right: 2px solid transparent;
		cursor: pointer;
		position: relative;

		.icon-close {
			position: absolute;
			top: 0;
			right: 8px;
			z-index: 1;
			display: none;
		}
	}

	.role-nav-box .item-list:hover {
		background: #ebf3ff;
		border-right-color: #46cdcf;

		.icon-close {
			display: block;
		}
	}

	.item-list-hover {
		background: #ebf3ff;
		border-right: 2px solid #46cdcf;
	}

	.role-nav-box .item-list:hover .icon-close {
		display: block;
		float: right;
	}

	.jurisdiction-edit {
		text-align: right;
		padding: 10px 30px;
		position: absolute;
		top: 0;
		right: 20px;
		z-index: 3;
	}

	/** 分页布局 */
	.p-contianer {
		position: relative;
		background-color: white;
		height: 44px;

		.p-bar {
			float: right;
			margin: 5px 100px 0 0;
			font-size: 14px !important;
		}
	}

	// .el-tabs /deep/ .el-tabs__nav-wrap::after {
	//   display: none !important;
	// }

	.el-tabs /deep/ .el-tabs__header {
		padding: 0 17px;
		margin: 0 0 15px !important;
	}

	.el-tabs /deep/ .el-tabs__item {
		font-size: 13px !important;
		height: 40px !important;
		line-height: 40px !important;
	}

	.el-table /deep/ thead th {
		background-color: #f2f2f2;
		font-weight: 400;
		font-size: 13px;
	}

	.el-table {
		border-top: 1px solid #e6e6e6;
	}

	.table-head-name {
		color: #909399;
		font-size: 13px;
		line-height: 23px;
		padding: 0;
	}

	.el-table /deep/ thead .cell {
		height: 23px;
	}

	.el-table /deep/ tbody tr td {
		font-size: 13px;
	}
</style>
